<template>
	<div>
		<div class="header" v-show="Obvhid">
			<div class="left iconfont icon-user" @click="$router.push('/userInfo'), play()"></div>
			<div class="center">
				MUSIC-VUE
			</div>
			<div class="right iconfont icon-search" @click="fction"></div>
		</div>
		<div class="navs" v-show="Obvhid">
			<router-link to="/recommend" class="item" tag="div"><span>推荐</span> </router-link>
			<router-link to="/rank" class="item" tag="div"><span>排行</span> </router-link>
			<router-link to="/singer" class="item" tag="div"><span>歌手</span> </router-link>
			<router-link to="/newmv" class="item" tag="div"><span>MV</span> </router-link>
		</div>

		<div class="search-for" v-show="!Obvhid">
			<div class="nav">
				<span class="iconfont icon-arrow-left-bold" @click="fction"></span>
				<input @keyup.enter="add" class="input" v-model="valuedata" type="text" placeholder="搜索歌曲,歌曲" />
				<span class="del" @click="del" style="">X</span>
			</div>
			<div class="nav-song">
				<h2 v-show="showhow">推荐</h2>
				<div class="nav-data" v-show="showhow">
					<ul class="clearfix">
						<li @click="addlist('刘德华')">刘德华</li>
						<li @click="addlist('林俊杰')">林俊杰</li>
						<li @click="addlist('张杰')">张杰</li>
						<li @click="addlist('张靓颖')">张靓颖</li>
						<li @click="addlist('张韶涵')">张韶涵</li>
						<li @click="addlist('徐良')">徐良</li>
						<li @click="addlist('阿悄')">阿悄</li>
						<li @click="addlist('冷漠')">冷漠</li>
						<li @click="addlist('许嵩')">许嵩</li>
					</ul>
				</div>
				<div class="record" v-show="showhow && this.recordlists != ''">
					<h2>搜索记录:</h2>
					<ul>
						<li v-for="(item, index) in recordlists" :key="index">
							<span>{{ item }}</span>
							<div class="con" @click="record(index)">X</div>
						</li>
					</ul>
				</div>
				<div class="nav-more" v-show="!showhow">
					<h2 v-show="!showhow">最佳匹配</h2>
					<ul>
						<li
							v-for="(item, index) in listsdata"
							:key="index"
							@click="playmusic(item.id, item.name, item.artists)"
						>
							<h3>{{ item.name }}</h3>
							<p>
								<span v-for="(i, data) in item.artists" :key="data" v-show="data < 3"
									>{{ i.name }}&nbsp;</span
								>
							</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getsearchfor } from '@/api/base';
export default {
	data() {
		return {
			lists: '',
			Obvhid: true,
			listsdata: [],
			showhow: true,
			listsevent: '',
			valuedata: '',
			recordlists: [],
		};
	},
	methods: {
		add(event) {
			this.showhow = false;
			this.valuedata = '';
			(this.listsdata = []), (this.lists = event.target.value);
			getsearchfor({ keywords: this.lists }).then((data) => {
				this.listsdata = data.result.songs;
				this.showhow = false;
				// console.log(data);
				event.target.value = '';
				this.recordlists.unshift(this.lists);
			});
		},
		del() {
			this.valuedata = '';
		},
		record(index) {
			this.recordlists.splice(index, 1);
		},
		fction() {
			this.Obvhid = !this.Obvhid;
			this.showhow = true;
			this.$emit('comdata', this.Obvhid);
			this.valuedata = '';
		},
		addlist(event) {
			this.listsevent = event;
			this.showhow = false;
			(this.listsdata = []),
				getsearchfor({ keywords: this.listsevent }).then((data) => {
					this.listsdata = data.result.songs;
					this.showhow = false;
					// console.log(this.listsdata);
					this.valuedata = this.listsevent;
					this.recordlists.unshift(this.listsevent);
				});
		},

		playmusic(id, name, ar) {
			let playMusicData = {
				coverImgUrl: this.listsdata[0].artists[0].img1v1Url,
				id,
				name,
				ar,
				tracks: this.listsdata,
			};
			// 数据存存储
			this.$store.commit('musicDatafun', playMusicData);
		},
		play() {
			this.$store.commit('playdata', true);
		},
	},
};
</script>

<style lang="less">
.header {
	height: 0.984375rem;
	display: flex;
	background-color: #a4d3ee;
	color: #fff;
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	.left {
		flex: 0 0 1.0625rem;
		font-size: 0.46875rem;
		line-height: 0.984375rem;
	}
	.center {
		flex: 1;
		line-height: 0.984375rem;
		font-size: 0.375rem;
	}
	.right {
		flex: 0 0 1.0625rem;
		font-size: 0.46875rem;
		line-height: 0.984375rem;
	}
}
.navs {
	display: flex;
	color: #fff;
	background-color: #a4d3ee;
	border-top: 1px solid rgba(#dddad9, 0.9);
	.item {
		font-size: 22px;
		height: 1.140625rem;
		flex: 1;
		text-align: center;
		span {
			margin-top: 0.359375rem;
			height: 0.515625rem;
			line-height: 0.515625rem;
			display: inline-block;
			border-bottom: 2px solid transparent;
		}
		&.router-link-active span {
			font-weight: bold;
			border-color: #fff;
		}
	}
}
.search-for {
	h2 {
		text-indent: 25px;
		margin-top: 10px;
		font-size: 24px;
	}
	.nav {
		width: 100%;
		display: flex;
		line-height: 50px;
		background-color: #a4d3ee;
		color: #fff;
		padding: 20px 0;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		.iconfont {
			flex: 0 0 50px;
			text-align: center;
			font-size: 30px;
		}
		.input {
			flex: 0.93;
			border-color: transparent;
			border-bottom: 1px solid #999;
			font-size: 20px;
			height: 48px;
			color: #666;
			text-indent: 20px;
			input {
				border-right: 1px solid transparent;
			}
		}
		.del {
			width: 50px;
			height: 50px;
			background-color: #fff;
			text-align: center;
			cursor: pointer;
			color: #000;
			border-left: 2px solid transparent;
			border-bottom: 1px solid #999;
		}
	}
	.record {
		width: 90%;
		margin: 0 auto;
		h2 {
			text-indent: 0px;
		}
		ul {
			margin-top: 20px;
			li {
				padding: 10px 0 5px;
				border-bottom: 1px solid #ccc;
				display: flex;
				font-size: 24px;
				justify-content: space-between;
				text-indent: 10px;
				span {
					font-weight: bold;
					color: #555;
					// text-shadow: 3px 5px #ccc;
				}
				.con {
					width: 50px;
					height: 50px;
					line-height: 50px;
					text-align: center;
					color: #999;
					font-weight: bold;
					// text-shadow: 2px 3px #999;
				}
			}
		}
	}
	.nav-data {
		width: 90%;
		margin: 10px auto 30px;
		ul {
			width: 100%;
			li {
				padding: 10px 22px;
				border: 2px solid #999;
				// background-color: rgba(#aeeeee, 0.9);
				font-size: 20px;
				float: left;
				margin: 10px;
				color: #999;
				border-radius: 10px;
				cursor: pointer;
				color: #333;
				text-shadow: 1px 0px #fff;
			}
		}
	}
	.nav-more {
		width: 100%;
		padding-bottom: 10px;
		background: linear-gradient(to right, #bb313e25);
		ul {
			width: 98%;
			margin: 0 auto;
			li {
				border-bottom: 0.2px solid #999;
				padding: 20px 20px 10px;
				h3 {
					font-size: 24px;
					// color: #63B8FF;
					// text-shadow: 2px 3px #fff;
				}
				p {
					color: #666;
					font-size: 16px;
					margin-top: 5px;
					// text-shadow: 2px 1px #ccc;
				}
			}
		}
	}
}
.input::-webkit-input-placeholder {
	color: #ccc;
}
.input:-moz-placeholder {
	color: #ccc;
}
.input:-ms-input-placeholder {
	color: #ccc;
}
</style>
